<template>
  <page-meta :root-font-size="rootFontSize() + 'px'"></page-meta>

  <view class="page-container" v-show="delayShow">
    <customHeader title="回顾概览" bgcolor="#ffffff" :border-line="false" />

    <view class="overview-container" :style="{ top: height }">
      <view class="overview-header">
        <view class="header-label" v-for="(item, index) in labelList" :key="item.id"
          @click="handleActiveItem(item, index)">
          {{ item.label }}
        </view>
        <view class="active-tabs__line" :style="lineStyle"></view>
      </view>
      <view class="overview-content">
        <swiper class="swiper-container" :autoplay="false" :current="activeIndex" @change="handleChangeSwiper">
          <swiper-item class="swiper-item">
            <originalArticle ref="articleRef" />
          </swiper-item>
          <swiper-item class="swiper-item">
            <vocabulary ref="vocabularyRef" />
          </swiper-item>
          <swiper-item class="swiper-item">
            <sentenceType ref="sentenceTypeRef" />
          </swiper-item>
          <swiper-item class="swiper-item">
            <syntax ref="syntaxRef" />
          </swiper-item>
        </swiper>
      </view>

      <button v-if="lastCourseStep !== -1" class="overview-operate" @click="handleToNext">随课自检</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import { rootFontSize } from "@/utils/util";
import customHeader from "@/components/customHeader.vue";
import originalArticle from "./originalArticle.vue";
import vocabulary from "./vocabulary.vue";
import sentenceType from "./sentenceType.vue";
import syntax from "./syntax.vue";
import { onLoad } from "@dcloudio/uni-app";
import { Course } from "@/pages/selfInspection";
import { useDelayShow } from "@/hooks/useDelayShow";

const { delayShow } = useDelayShow();

const articleRef = ref(null);
const vocabularyRef = ref(null);
const sentenceTypeRef = ref(null);
const syntaxRef = ref(null);
const activeIndex = ref(0);
const labelList = ref([
  {
    id: "originalArticle",
    label: "原文",
  },
  {
    id: "vocabulary",
    label: "词汇",
  },
  {
    id: "sentenceType",
    label: "句型",
  },
  {
    id: "syntax",
    label: "语法",
  },
]);
const height = ref(getApp().globalData!.pageTop);
const lineStyle = ref<any>(null);
const lastCourseStep = ref(-1);
const section_id = ref("");

onLoad(async (option: any) => {
  section_id.value = option.section_id;
  if (option.lastCourseStep) {
    lastCourseStep.value = Number(option.lastCourseStep);
  }
  const result = option.data && JSON.parse(decodeURIComponent(option.data));
  getOverViewData(result.data);
});

const getOverViewData = async (result: any) => {
  const article = result.article;
  const vocabulary = result.vocabulary;
  const sentence_type = result.sentence_type;
  const syntax = result.syntax;

  await nextTick();

  (articleRef.value as any).handleInit(article);
  (vocabularyRef.value as any).handleInit(vocabulary);
  (sentenceTypeRef.value as any).handleInit(sentence_type);
  (syntaxRef.value as any).handleInit(syntax);
};

const handleChangeSwiper = (e: any) => {
  const { detail: { current } } = e;

  activeIndex.value = current;
  (articleRef.value as any).handleRestart();

  handleSetBorderLine();
}

const handleActiveItem = (item: any, index: number) => {
  activeIndex.value = index;
  (articleRef.value as any).handleRestart();

  handleSetBorderLine();
};

const getModuleWidth = () => {
  return new Promise((resolve) => {
    const query = uni.createSelectorQuery();
    query
      .selectAll(".header-label")
      .boundingClientRect((data) => {
        if (data) {
          resolve(data);
        }
      })
      .exec();
  });
};

const handleSetBorderLine = async () => {
  const tabs = (await getModuleWidth()) as any;
  const itemTab = tabs[activeIndex.value];

  const currentBeforeArr = tabs.slice(0, activeIndex.value);
  const lineOffsetLeft = currentBeforeArr.reduce((total: number, curr: { width: number }) => {
    return total + curr.width;
  }, 0);

  const left = lineOffsetLeft + itemTab.width / 2;

  const style = {
    transform: `translateX(${left}px) translateX(-50%)`,
  };

  lineStyle.value = style;
};

const handleToNext = () => {
  Course.init(section_id.value, () => {
    uni.navigateTo({
      url: Course.currentRouter,
    });
  });
}

onMounted(() => {
  handleSetBorderLine();
});
</script>

<style scoped lang="scss">
.page-container {
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;

  .overview-container {
    width: 100%;
    height: calc(100% - v-bind(height));
    overflow: hidden;

    .overview-header {
      position: relative;
      display: flex;
      justify-content: space-between;
      height: 2.5rem;
      margin-top: 1rem;
      border-bottom: 1px solid #f9eedc;

      .header-label {
        flex: 1;
        display: flex;
        justify-content: center;
        font-family: xiaolai;
        font-size: 1.5rem;
        color: $uni-text-color-grey;
      }

      .active-tabs__line {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 1.8rem;
        height: 0.4rem;
        border-top-left-radius: 0.2rem;
        border-top-right-radius: 0.2rem;
        background-color: $uni-btn-prime;
        transition-duration: 0.3s;
      }
    }

    .overview-content {
      width: 100%;
      height: calc(100% - 3.6rem);

      .swiper-container {
        width: 100%;
        height: 100%;
      }
    }

    .overview-operate {
      position: fixed;
      bottom: 3.9rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 12rem;
      height: 5rem;
      margin: 1rem 0 0;
      font-family: xiaolai;
      font-size: 1.7rem;
      border-radius: 1rem;
      color: $uni-text-color;
      border: 2px solid $uni-btn-border;
      background-color: $uni-btn-prime;
    }
  }
}
</style>
